<template>
	<div class="home">
		<el-row>
			<el-col :span="12">
				<div class="box">
					<ECharts :option="option1" ref="echarts1"></ECharts>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="box">
					<ECharts :option="option2"></ECharts>
				</div>
			</el-col>
		</el-row>
	</div>
</template>


<script setup lang="ts">
import { onMounted } from 'vue'
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const echarts1 = ref();
const router = useRouter()
onMounted(() => {
	axios.get('/api/echarts/order/state').then(resp => {
		option1.value = resp.data.data;

		const myEcharts = echarts1.value.inst

		myEcharts.on('click', (params: any) => {
			console.log(params)
			router.push({
				name: 'list',
				query: {
					orderState: params.name
				}
			})
		})
		
	})
})

const option1 = ref()

const option2 = {
	title: {
		text: 'Stacked Line'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	toolbox: {
		feature: {
			saveAsImage: {}
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: 'Email',
			type: 'line',
			stack: 'Total',
			data: [120, 132, 101, 134, 90, 230, 210]
		},
		{
			name: 'Union Ads',
			type: 'line',
			stack: 'Total',
			data: [220, 182, 191, 234, 290, 330, 310]
		},
		{
			name: 'Video Ads',
			type: 'line',
			stack: 'Total',
			data: [150, 232, 201, 154, 190, 330, 410]
		},
		{
			name: 'Direct',
			type: 'line',
			stack: 'Total',
			data: [320, 332, 301, 334, 390, 330, 320]
		},
		{
			name: 'Search Engine',
			type: 'line',
			stack: 'Total',
			data: [820, 932, 901, 934, 1290, 1330, 1320]
		}
	]
}

</script>


<style>
.box {
	width: 100%;
	height: 500px;
}

.home {
	flex: 1;
}
</style>